<template>
  <el-container class="container">
    <el-header class="navbar" height="60px" style="padding:0px">
      <el-row style>
        <el-col :span="4">
          <!--这里有个bug-->
          <!--<el-link v-show="leftLayout" class="header-btn" @click="onCollapseClick"><i class="el-icon-s-fold"></i>-->
          <!--</el-link>-->
          <el-link href="/"><h3 class="logo fl" style="font-size: 18px">SLASH管理平台</h3></el-link>
        </el-col>
        <el-col :span="14">
          <div>
            <span v-show="leftLayout">&nbsp;</span>
            <header-menu v-show="!leftLayout" :menuList="menuList" mode="horizontal"></header-menu>
          </div>
        </el-col>
        <el-col :span="6" class="header-right-box" style="text-align: right">
          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal">
            <el-menu-item index="3">
              <el-link type="primary" target="_blank" href="https://github.com/lanmushan/SlashCloud">GITHUB</el-link>
            </el-menu-item>
            <el-menu-item index="1">
              <el-link type="primary" target="_blank" href="https://gitee.com/lanmushan/slash-cloud">GITEE</el-link>
            </el-menu-item>
            <el-submenu index="2">
              <template slot="title">{{username}}</template>
              <!--<el-menu-item index="2-1"><p><i class="iconfont mr-5">&#xe8ac;</i>个人中心</p></el-menu-item>-->
              <el-menu-item index="2-2"><p @click="onModifyPassword"><i class="iconfont mr-5">&#xe848;</i>修改密码</p>
              </el-menu-item>
              <el-menu-item index="2-3"><p @click="onSwitchLayout"><i class="iconfont mr-5">&#xe7ed;</i>切换布局</p>
              </el-menu-item>
              <el-menu-item index="2-4"><p @click="onLoginLogBtnEvent"><i class="iconfont mr-5">&#xe900;</i>登录日志</p>
              </el-menu-item>
              <el-menu-item index="2-4"><p @click="loginOut"><i class="iconfont mr-5">&#xe806;</i>安全退出</p>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-col>
      </el-row>
    </el-header>
    <el-row style="height: 100%;">
      <el-col :span="leftLayout?3:0" class="left-box">
        <left-menu :menuList="menuList" :collapse.sync="collapse"></left-menu>
      </el-col>
      <el-col :span="leftLayout?21:24" style="height: 100%">
        <el-container style="height: 100%">
          <el-header height="40px" style="padding:0px" class="tab-header">
            <el-tabs
              @tab-click="tabJump"
              v-model="editableTabsValue"
              closable
              @tab-remove="removeTab"
              class="slash-tab"
            >
              <el-tab-pane
                v-for=" (item, index) in editableTabs"
                :key="item.name"
                :label="item.title"
                :name="item.name"
              >
              <span slot="label">
                <i class="el-icon-date" style="margin-left:10px"></i>
                {{item.title}}
              </span>
              </el-tab-pane>
            </el-tabs>
          </el-header>
          <el-main>
            <transition name="fade">
              <keep-alive>
                <router-view :key="$route.fullPath" style="background:#f3f3f4;"></router-view>
                <div style="height: 200px;"></div>
              </keep-alive>
            </transition>
          </el-main>
        </el-container>
      </el-col>
    </el-row>
    <!--<div style="border: 0px solid green;height: calc(100% - 50px);display: inline-block;width:200px">-->
    <!--<el-aside class="left-box" v-show="leftLayout" style="width:200px">-->
    <!--<div style="overflow: scroll">-->
    <!--<left-menu :menuList="menuList" :collapse.sync="collapse"></left-menu>-->
    <!--</div>-->
    <!--</el-aside>-->

    <!--</div>-->
    <!--<div style="border: 0px solid green;height: calc(100% - 50px);display: inline-block;width: calc(100% - 300px)">-->
    <!--<el-container style="height: 100%">-->
    <!--<el-header height="40px" style="padding:0px" class="tab-header">-->
    <!--<el-tabs-->
    <!--@tab-click="tabJump"-->
    <!--v-model="editableTabsValue"-->
    <!--closable-->
    <!--@tab-remove="removeTab"-->
    <!--class="slash-tab"-->
    <!--&gt;-->
    <!--<el-tab-pane-->
    <!--v-for=" (item, index) in editableTabs"-->
    <!--:key="item.name"-->
    <!--:label="item.title"-->
    <!--:name="item.name"-->
    <!--&gt;-->
    <!--<span slot="label">-->
    <!--<i class="el-icon-date" style="margin-left:10px"></i>-->
    <!--{{item.title}}-->
    <!--</span>-->
    <!--</el-tab-pane>-->
    <!--</el-tabs>-->
    <!--</el-header>-->
    <!--<el-main>-->
    <!--<transition name="fade">-->
    <!--<keep-alive>-->
    <!--<router-view :key="$route.fullPath" style="background:#f3f3f4;"></router-view>-->
    <!--<div style="height: 200px;"></div>-->
    <!--</keep-alive>-->
    <!--</transition>-->
    <!--</el-main>-->
    <!--</el-container>-->

    <!--</div>-->

    <!---->
    <el-row>
      <el-dialog
        title="修改密码"
        :visible.sync="passwordVisible"
        width="30%"
        :before-close="handleClose">
        <el-form ref="passwordForm" @submit.native.prevent :rules="passwordRules" :model="passwordForm"
                 label-width="80px">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input type="password" v-model="passwordForm.oldPassword"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input type="password" v-model="passwordForm.newPassword"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input type="password" v-model="passwordForm.confirmPassword"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="passwordVisible = false">取 消</el-button>
          <el-button type="primary" @click="onSubmitModifyPassword">确认修改密码</el-button>
        </span>
      </el-dialog>
    </el-row>

  </el-container>

</template>
<script>
  import resourceApi from '@/apis/authApp/authTbResourceApi.js'
  import loginApi from '@/apis/loginApi.js'
  import LeftMenu from '@/components/menu/LeftMenu'
  import {loadRouter} from '@/js/asyncRouter.js'
  import HeaderMenu from '@/components/menu/HeaderMenu'

  let _that
  export default {
    components: {LeftMenu, HeaderMenu},
    data () {
      return {
        username: '后台管理员',
        passwordForm: {
          oldPassword: '',
          newPassword: '',
          confirmPassword: ''
        },
        passwordVisible: false,
        collapse: false,
        activeIndex: '0',
        menuList: [],
        editableTabsValue: '0',
        editableTabs: [],
        tabIndex: 2,
        leftLayout: true,
        passwordRules: {
          oldPassword: [
            {required: true, message: '请输入原密码', trigger: 'blur'},
          ],
          newPassword: [
            {required: true, message: '请输入新密码', trigger: 'blur'},
            {min: 6, max: 16, message: '登录密码6-16位', trigger: 'blur'}
          ],
          confirmPassword: [
            {required: true, message: '请输入确认密码', trigger: 'blur'},
            {required: true, validator: this.confirmPasswordEq, trigger: 'blur'}
          ],
        }
      }
    },
    created () {
      this.initLayout()
      _that = this
      resourceApi.selectCurrentUserMenu().then(msg => {
        if (msg.code == 200) {
          this.menuList = msg.rows
        }
      })
      loginApi.getCurrentUser().then((msg) => {
        this.username = msg.row.username
      })
    },

    computed: {
      secondChange () {
        this.editableTabs = this.$store.state.tab.list
        this.editableTabsValue = this.$store.state.tab.active
      }
    },
    watch: {
      secondChange () {
        this.editableTabs = this.$store.state.tab.list
        this.editableTabsValue = this.$store.state.tab.active
      }
    },
    methods: {
      loginOut () {
        loginApi.loginOut()
      },
      confirmPasswordEq: (rule, value, callback) => {
        if (!value) {
          return callback(new Error('请输入密码'))
        } else if (value !== _that.passwordForm.newPassword) {
          return callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },
      onSubmitModifyPassword () {
        this.$refs['passwordForm'].validate(valid => {
          if (!valid) {
            return
          }
          let data = this.cloneDeep(this.passwordForm)
          data.oldPassword = this.$md5(data.oldPassword)
          data.newPassword = this.$md5(data.newPassword)
          loginApi.modifyPassword(data).then((msg) => {
            this.$message(msg.msg)
          })
        })

      },
      onModifyPassword () {
        this.passwordVisible = true
      },
      initLayout () {
        let layout = window.localStorage.getItem('leftLayout')
        if (layout == null) {
          this.leftLayout = true
        } else if (layout == 'false') {
          this.leftLayout = false
        } else {
          this.leftLayout = true
        }
      },
      onCollapseClick () {
        this.collapse = !this.collapse
        console.log(this.collapse)
      },
      onSwitchLayout () {
        this.leftLayout = !this.leftLayout
        window.localStorage.setItem('leftLayout', this.leftLayout)
      },
      onLoginLogBtnEvent () {
        this.jump(`/pages/AuthApp/AuthTbUserLoginLog/AuthTbUserLoginLogCurUserList`, `个人登录日志`, {treeList: this.treeList})
      },
      tabJump (obj) {
        for (let row of this.editableTabs) {
          if (row.name == obj.name) {
            this.jump(row.path, row.title, row.query)
            break
          }
        }
      },
    }
  }
</script>
<style scoped>
  @import "../css/layout.css";

  .navbar {
    background: white;
  }

  .header-right-box {
  }

  el-row {
    background: transparent;
  }

  .left-box {
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-bottom: 50px;
    box-sizing: border-box;
    background-color: rgb(48, 65, 86);
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .tac {
    overflow: hidden;
    box-sizing: border-box;
  }

  .el-submenu {
    overflow: hidden;
  }

  .left-box::-webkit-scrollbar {
    width: 0px;
  }

  .container {
    height: 100%;
  }

  .tab-header {
    background: white;
    box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08) inset;
  }

  .footer {
    height: 30px;
    background: #cccccc;
  }

  .el-main {
    padding: 0px;
    height: 200px;
    background: #f3f3f4;
  }

  .el-tabs .el-tab-pane {
    height: 0px;
    padding: 0px;
  }

  .el-tabs--border-card > .el-tabs__content {
    padding: 0px;
  }

  .header-btn {
    background: transparent;
    border: none;
    float: left;
    margin-left: 20px;
    text-decoration: none !important;
    color: #909399;
    margin-top: 15px;
  }

  .header-btn i {
    font-size: 25px;
  }

  .header-btn:link, .header-btn:active, .header-btn:checked {
    border: none;
  }

  .logo {
    color: #409eff;
    line-height: 60px;
    padding-left: 20px;
    text-overflow: inherit;
  }

  .slash-tab {
    padding-left: 10px;
  }

  .slash-tab >>> .el-tabs__nav .el-tabs__item:nth-child(2) .el-icon-close {
    display: none !important;
    background: red;
  }

  .fade-enter {
    transition: all 5s;
  }

</style>
